<template>
  <div class="tGrid" v-for="(grid,index) in list" :key="index">
    <div class="tGrid-title">{{grid.name}}</div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="(item,key) in grid.children" :key="key">
        <t-icon
          @click="handleClick(grid,item)"
          size="1.2rem"
          labelSize="0.4rem"
          :label="item.label"
          :name="item.name"
          :badge="item.badge"
          :url="item.url"
        >
        </t-icon>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script lang="ts">
import tIcon from "../icon/index.vue"
import { defineComponent} from 'vue'

export default defineComponent({
  name: 'tGrid',
  props:{
    list:Array
  },
  emits:['tapChange'],
  setup (props,context) {
    return {
      handleClick(grid,item){
        context.emit('tapChange',grid,item);
      }
    }
  },
  components:{tIcon}
})
</script>

<style lang="scss">
.tGrid{
  margin-bottom: 20px;
  border-radius: 6px;
  border: 1px solid var(--van-gray-6);
  box-shadow: 0px 1px 2px 4px var(--van-gray-3);
  .van-grid-item__content{
    padding: 5px 0 10px 0;
  }
  .t-icon{
    padding: 5px 0px;
  }
  .tGrid-title{
    font-size: 0.5rem;
    font-weight: 600;
    padding: 5px 0 0 10px;
  }
}
</style>